<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        img {
            border: 1px solid red;
            width: 150px;
            height: 150px;
        }
    </style>
    <script>
        window.onload = function () {
            //1.获取所有需要的元素
            var imgs = document.querySelectorAll("img");//图片
            var scoreSpan = document.querySelector("span");//分数
            //2. 初始化所需要用到的变量
            var score = 0;//总分
            var index = 0;//随即索引（通过随机出来的0-8索引值，让对应的img来显示小老鼠）
            var flag = false;//是否可以击打小老鼠的开关，true可以打，false不可以打（防止打多次）
            var lastIndex = 0;//上一次索引（为了让上一次出现的老鼠隐藏）
            // 逻辑开始：
            // 3. 随机出现老鼠(每隔2s随机出现一次老鼠)
            // 3.1 每隔2s，做一件事情
            setInterval(function () {
                // 将上一次的图片变为默认bg.jpg图片
                imgs[lastIndex].src = "img/bg.jpg"
                // 如果上一次击打过，flag如果为true，说明没有击打
                if (flag) {// flag为true，if条件成立   ： flag == true
                    score -= 2;
                    scoreSpan.innerHTML = score;
                }

                /// -------------- 以下代码为当前次执行的逻辑-----------
                // 3.2 随机切换img，显示老鼠图片
                // (1) 获取随机数：0-8
                // Math.random() * 9 // [0,1) * 9 --- [0,9) 
                index = Math.floor(Math.random() * 9)// [0,1) * 9 --- [0,9) -- 取整 --- 0-8
                // index = parseInt(Math.random() * 9)// [0,1) * 9 --- [0,9) -- 取整 --- 0-8
                // console.log("随机数为：" + index);

                // (2) 让随机数对应的图片的src修改为老鼠图片
                // console.log(imgs[index]);
                imgs[index].src = "img/mouse.jpg" // 5
                // 老鼠出现，flag为true，可以击打
                flag = true;

                // 这一次执行完成之后，记录一下这一次的索引
                lastIndex = index;


            }, 2000);

            // 4. 击打老鼠 (每个图片都可以被点击，如果点击的图片正好是出现老鼠的图片，那么就切换图片为hit.jpg)
            // 4.1 给每张添加点击事件
            // imgs[0].onclick = function () {
            //     alert('我被点击了');
            // }
            // imgs[1].onclick = function () {
            //     alert('我被点击了');
            // }
            //遍历imgs中所有的img，然后添加点击事件
            for (var i = 0; i < imgs.length; i++) {
                var img = imgs[i];
                img.onclick = function () {
                    if (flag == true) {//可以击打
                        // alert("我被点击了");
                        // 4.2 判断是否打中了  (判断当前点击图片的索引  是否与 随即出现老鼠的索引 相等)
                        //随即出现老鼠的索引 index
                        //当前点击图片的索引 this.id
                        // console.log(this);// this代表的就是当前被点击的图片元素对象
                        if (this.id == index) {
                            // alert('打中了');
                            //(1)更换击打图片
                            imgs[index].src = "img/hit.jpg"
                            //(2)计算分数，显示击打之后的分数
                            score += 5; // score = score+5;
                            scoreSpan.innerHTML = score;

                        } else {
                            score -= 2;
                            scoreSpan.innerHTML = score;
                        }
                        // 不管有没有打中，只要点击过一次，打击过一次，就不能重复打击
                        flag = false;

                        // 1. 可以连续击打 - 开关思路（处理过一次将开关关上）
                        // 老鼠出现，flag为true，可以击打
                        // 击打过，flag为false，不可以击打
                        // 2. 如果没有打中，或者压根没有击打，分数应该-2
                        // 2.1 如果没有打中
                        // 2.2 压根没有击打
                    }
                }
            }
        }
    </script>

</head>

<body>
    <div> 总分:
        <span>0</span>
    </div>

    <div>
        <img id="0" src="img/bg.jpg" style="cursor:url(img/hummer.png),auto" />
        <img id="1" src="img/bg.jpg" style="cursor:url(img/hummer.png),auto" />
        <img id="2" src="img/bg.jpg" style="cursor:url(img/hummer.png),auto" />

    </div>
    <div>
        <img id="3" src="img/bg.jpg" style="cursor:url(img/hummer.png),auto" />
        <img id="4" src="img/bg.jpg" style="cursor:url(img/hummer.png),auto" />
        <img id="5" src="img/bg.jpg" style="cursor:url(img/hummer.png),auto" />

    </div>
    <div>
        <img id="6" src="img/bg.jpg" style="cursor:url(img/hummer.png),auto" />
        <img id="7" src="img/bg.jpg" style="cursor:url(img/hummer.png),auto" />
        <img id="8" src="img/bg.jpg" style="cursor:url(img/hummer.png),auto" />

    </div>

</body>

</html>